import { useColumns } from "./hook"
import { Table, Space, Button } from 'antd'
import { useState, useEffect } from 'react'
import { getProList } from '../../api/pro'
import { useCallback } from "react"
import ExportJsonExcel from 'js-export-excel' // npmjs.org 查看
const Com = () => {
    const columns = useColumns()
    // 分页器
    const [current, setCurrent] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    const [proList, setProList] = useState([])

    useEffect(() => {
        getProList().then(res => {
            setProList(res.data)
        })
    }, [])
    // 固定头和列
    const [height, setHeight] = useState(0)
    useEffect(() => {
        setHeight(window.innerHeight)
    }, [])

    const exportPro = useCallback(() => {
        var option = {}
        option.fileName = "产品列表";

        option.datas = [
            {
                sheetData: proList,
                sheetName: "sheet",
                sheetFilter: ['proname', 'img1', 'category', 'brand', 'originprice'],
                sheetHeader: ["产品名称", "产品图片", '分类', '品牌', '原价'],
                columnWidths: [20, 20],
            },
        ];
        var toExcel = new ExportJsonExcel(option); //new
        toExcel.saveExcel(); //保存
    }, [proList])
    return (
        <Space style={{ width: '100%' }} direction="vertical">
            <Button type="primary" onClick={exportPro}>导出数据</Button>
            <Table
                dataSource={proList}
                columns={columns}
                rowKey="proid"
                scroll={{ x: 1500, y: height - 300 }}
                pagination={{
                    position: ['bottomRight'],
                    current,
                    pageSize,
                    onChange: (page, pageSize) => {
                        setCurrent(page)
                        setPageSize(pageSize)
                    },
                    pageSizeOptions: ['5', '10', '15', '20'],
                    showQuickJumper: true,
                    showTotal: (total) => <span>共有{total}条数据</span>
                }}
            ></Table>
        </Space>
    )
}

export default Com